<template>
    <div>
        <!-- <Rank></Rank> -->
        <div class="content-list">
            <div
                class="content"
                v-for="video in homeStore.videoList"
                :key="video.id"
            >
                <Card :video="video"></Card>
            </div>
            <AddMore :VideoList="homeStore.videoList"></AddMore>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
// import homeApi,{type ProductionScreenModel ,type ContentModel} from '@/api/mockHome';
import useHomeStore from "@/stores/modules/home";
const homeStore = useHomeStore();

// const VideoList = ref<ContentModel[]>([])

//获取视频列表
// const getVideos = async () => {
//   try {
//     const result = await homeApi.getProductionSynthesize()
//     VideoList.value = result.content

//     console.log(result)
//   } catch (error) {
//     console.log(error)
//   }
// }

onMounted(() => {
    // getVideos()
    homeStore.getCourseSynthesize();
});
</script>

<style scoped lang="scss">
.content-list {
    display: flex;
    flex-wrap: wrap;

    // margin-top: 10px;
    .content {
        margin-right: 20px;

        &:nth-child(5n) {
            margin-right: 0;
        }

        margin-bottom: 20px;
    }
}
</style>
